<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <form id="updateTable">
    <table width="100%">
        <tr>
            <td>规格名称</td>
            <td>
                <input  class="form-control" name="specName" th:value="${specification.specName}" placeholder="规格名称" >
                <input type="hidden" name="id" th:value="${specification.id}">
            </td>
        </tr>
    </table>

    <!-- 规格选项 -->
    <div class="btn-group">
        <button type="button" onclick="updateRow()" class="btn btn-default" title="新建" ><i class="fa fa-file-o"></i> 新增规格选项</button>
    </div>

    <table id="upTab" class="table table-bordered table-striped table-hover dataTable">
        <thead>
        <tr>
            <th class="sorting">规格选项</th>
            <th class="sorting">排序</th>
            <th class="sorting">操作</th>
        </tr>
        </thead>
        <tbody th:each="l:${list}">
        <tr>
            <td>
                <input  class="form-control" th:value="${l.optionName}" name="optionName" placeholder="规格选项">
            </td>
            <td>
                <input  class="form-control" th:value="${l.orders}"  name="orders" placeholder="排序">
            </td>
            <td>
                <button type="button" class="btn btn-default" onclick="dele(this)" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
            </td>
        </tr>
        </tbody>
    </table>
    </form>
</div>

</body>
<script type="text/javascript">
    function  updateRow(){
        var upTab = document.getElementById("upTab");
        var rownum = upTab.rows.length;// 行数
        var newRow=upTab.insertRow(rownum);

        var htmlTab = newRow.insertCell(0);
        var html  = "";
        html  +='<tbody><tr>';
        html  += '<td><input  class="form-control" name="optionName" placeholder="规格选项"></td>';
        html  += '<td><input  class="form-control" name="orders" placeholder="排序"></td>';
        html  += '<td><button type="button" class="btn btn-default" onclick="dele(this)" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>';
        html  += '</tr></tbody>';
        newRow.innerHTML = html;
    }
    function dele(obj){
        var otr = obj.parentNode.parentNode;
        var tab =  otr.parentNode; //自己的父节点 就是table
        tab.removeChild(otr);
    }
</script>
</html>